<template>
  <div class="formPageContainer" :style="{width: isFold ? 'calc(60% - 25px)' : 'calc(60% - 115px)', left: isFold ? '50px' : '230px'}">
    <div class="formPageMain" id="formPageMain">
      <el-card v-for="(item, index) in formData" :key="index" :id="item.classification">
        <template #header>
          <div class="card-header flex align-center">
            <span class="flex align-center"><i :class="['sjcj', item.icon]"></i>{{item.name}}</span>
          </div>
        </template>
        <div class="formPageBox">
          <el-form
              label-position="top"
              label-width="auto"
              :model="formData"
          >
            <el-row :gutter="20">
              <el-col :span="12" v-for="(it, i) in item.formFields" :key="i">
                <el-form-item :label="it.label" label-position="right">
                  <template v-if="it.type === 'input'">
                    <el-input v-model="formData[item.classification].formFields[i].value" style="width: 100%;" :placeholder="`请输入${it.label}`" />
                  </template>
                  <template v-if="it.type === 'select'">
                    <el-select v-model="formData[item.classification].formFields[i].value" style="width: 100%;" :placeholder="`请选择${it.label}`">
                      <el-option
                          v-for="option in it.data"
                          :key="option.value"
                          :label="option.label"
                          :value="option.value"
                      />
                    </el-select>
                  </template>
                  <template v-if="it.type === 'date'">
                    <el-date-picker
                        v-model="formData[item.classification].formFields[i].value"
                        type="datetime"
                        style="width: 100%;"
                        :placeholder="`请选择${it.label}`"
                    />
                  </template>
                  <template v-if="it.type === 'year'">
                    <el-date-picker
                        v-model="formData[item.classification].formFields[i].value"
                        type="year"
                        style="width: 100%;"
                        :placeholder="`请选择${it.label}`"
                    />
                  </template>
                  <template v-if="it.type === 'month'">
                    <el-date-picker
                        v-model="formData[item.classification].formFields[i].value"
                        type="month"
                        style="width: 100%;"
                        :placeholder="`请选择${it.label}`"
                    />
                  </template>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup name="FormPage">
import useAppStore from '@/store/modules/app';
import { fields, navInfo } from "@/config/fields.js";
const appStore = useAppStore();
let isFold = computed(()=>appStore.isFold);

import { reactive, onBeforeMount } from "vue";
let formData = reactive({});

onBeforeMount(() => {
  navInfo.forEach(item => {
    item.formFields = [];
    formData[item.classification] = item;
  })
  fields.forEach(item => {
    let classification = item.classification;
    formData[classification].formFields.push(item);
  })
  appStore.formDataHandle(formData);
})
</script>
<style lang="scss" scoped>
.formPageContainer{
  width: calc(60% - 115px);
  transition: all 0.2s;
  position: absolute;
  left: 230px;
  top: 0;
  bottom: 0;
  padding: 20px;
  box-sizing: border-box;
  .formPageMain{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }
}
:deep .el-card{
  margin-bottom: 15px;
  box-shadow: none !important;
  &:last-of-type{
    margin-bottom: 0;
  }
  .el-card__header{
    padding: 0 !important;
    height: 40px;
  }
}
.card-header {
  height: 100%;
  padding: 0 15px;
  span{
    font-weight: bold;
    font-size: 18px;
    i{
      margin-right: 10px;
    }
  }
}
</style>